<template>
    <div class="error dir-left-nowrap">
        <div class="left dir-left-nowrap main-right cross-center">
            <div class="error-img">
                <img src="/imgs/mirror.png" alt="Error Image" />
            </div>
        </div>
        <div class="right cross-center">
            <div class="dir-top-nowrap gap">
                <div class="error-text">抱歉!</div>
                <div>
                    {{ props.error.statusCode }}<br>
                    <em>{{ props.error.message }}</em>
                </div>
                <!-- <div v-if="props.error.stack" v-html="props.error.stack"
                    style="width: 700px; max-height: 300px; overflow: auto;"></div> -->
                <div class="dir-left-nowrap gap">
                    <button @click="handleError()">返回主页！</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import type { NuxtError } from '#app';

const props = defineProps<{
    error: NuxtError
}>()

// console.log('错误页:', props.error);


/**清除错误返回首页 */
function handleError() {
    clearError({ redirect: '/' })
}
</script>

<style scoped lang="scss">
@import url("https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&family=Roboto:wght@500&display=swap");


.error {
    height: 100vh;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: white;

    .left {
        padding-right: 40px;
        width: 50%;
        height: 100%;
        background-image: url("/imgs/right-edges.png");
        background-position: top right;
        background-repeat: no-repeat;
        background-size: 25px 100%;

        .error-img {
            display: block;
            max-width: 500px;

            img {
                width: 100%;
            }
        }
    }

    .right {
        width: 50%;
        height: 100%;
        padding-left: 40px;
        background-color: #383838;

        .error-text {
            font-family: "Fontdiner Swanky", cursive;
            font-size: 4rem;
            color: #c5dc50;
        }

        em {
            font-style: italic;
            color: #c5dc50;
        }

        button {
            cursor: pointer;
            font-family: "Fontdiner Swanky", cursive;
            font-size: 1rem;
            color: #383838;
            border: none;
            background-color: #f36a6f;
            padding: 1rem 2.5rem;
            -webkit-transform: skew(-5deg);
            transform: skew(-5deg);
            -webkit-transition: all 0.1s ease;
            transition: all 0.1s ease;

            &:hover {
                background-color: #c5dc50;
                -webkit-transform: scale(1.15);
                transform: scale(1.15);
            }
        }

    }

}


@media (max-width: 700px) {}
</style>